<template>
    <!-- 菜单容器  => 一级菜单-->
    <el-menu :router="true" :default-active="$route.name">
        <template v-for="menu in authorityMenus">
            <!--  一级菜单项  不存在children -->
            <el-menu-item v-if="!menu.children" :key="menu.name" :index="menu.name" :route="menu.path">首页</el-menu-item>
            <!-- 二级菜单  存在-->
            <el-submenu v-else  :key="menu.name" :index="menu.name" >
                <template v-slot:title><i class="el-icon-message"></i>{{ menu.label }}</template>
                <!-- 二级菜单项 -->
                <el-menu-item v-for="subMenu in menu.children" :key="subMenu.name" :index="subMenu.name"  :route="subMenu.path">{{ subMenu.label }}</el-menu-item>
            </el-submenu>
        </template>
        
        
    </el-menu>
</template>

<script>
    // menus => 总的菜单

    import {menus} from "@/router";
    import { mapGetters } from "vuex";
  
    export default {
        name:"AsideView",
        data(){
            return {
                menus
            }
        },
        computed:{
            ...mapGetters(["authorityMenus"]),
        },
        mounted(){
            console.log(this.menus);
        }
    }
</script>